<template>
  <div>
    <h3>详情页</h3>
  </div>
  <button @click="show = !show">Toggle</button>
  <Transition>
    <ElCard v-if="show" style="max-width: 480px">
      <template #header>Yummy hamburger</template>
      <img
        src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
        style="width: 100%"
      />
    </ElCard>
  </Transition>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const show = ref(true)
</script>

<style scoped>
/* 下面我们会解释这些 class 是做什么的 */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
